<template>
  <div>
    <editForm :formConfig="formConfig" ref="editForm" :formData="editFormData">
      <template #classesName="{ editFormInfo }">
        <el-input
          size="mini"
          :title="editFormInfo.classesName"
          v-model="editFormInfo.classesName"
          :placeholder="'请选择'"
          :disabled="disabled"
          readonly
        >
          <el-button
            slot="append"
            :disabled="disabled"
            @click="openDialog(editFormInfo)"
            >选择</el-button
          >
        </el-input>
      </template>
    </editForm>
    <div style="text-align: left">
      <i class="el-icon-question" style="color: #81d3f8; font-size: 20px"></i
      ><i>提示：排班开始时间和班别方案保存后不允许修改，请考虑好填写</i>
    </div>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      :fullscreen="true"
      :modal="false"
      @doSubmit="doSubmit"
      @doClose="doClose"
    >
      <classRelatePage
        :department="department"
        :searchData="searchData"
        ref="classRelatePage"
      ></classRelatePage>
    </dialogPublic>
  </div>
</template>

<script>
import classRelatePage from "../classPlan/classRelatePage.vue";
export default {
  components: {
    classRelatePage,
  },
  data() {
    return {
      title: "",
      show: false,
      disabled: false,
      department: "",
      searchData: {},
      formConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "方案名称",
            prop: "name",
            type: "text",
            span: 24,
            placeholder: "请选择或直接输入",
            disabled: false,
            required: true,
          },
          {
            label: "值班单位",
            prop: "deptName",
            propArr: "deptArr",
            idsStr: "deptId",
            type: "dept-select", //类型
            methods: (obj) => {},
            option: [],
            span: 12,
            disabled: false,
            required: true,
          },
          {
            label: "班别方案",
            prop: "classesName",
            type: "text",
            span: 12,
            required: true,
          },
          {
            label: "值班地点",
            prop: "locationName",
            propArr: "locationArr",
            idsStr: "locationId",
            type: "location-select",
            option: [],
            required: true,
            span: 12,
          },
          {
            label: "排班开始时间",
            prop: "startTime",
            type: "date",
            span: 12,
            required: true,
            disabled: false,
            dateFormat: "yyyy-MM-dd HH:mm",
            methods: (val) => {
              if (this.startTime != "") {
                let time = `${val.split(" ")[0]} ${this.startTime}`;
                this.$refs.editForm.setFormItem("startTime", time);
              } else {
                this.$message.warning("请选择排班方案");
                this.$refs.editForm.setFormItem("startTime", "");
              }
            },
          },
        ],
      },
      //弹出框表单数据
      editFormData: {
        advanceShiftTime: 15,
        advanceShiftUnit: "0",
      },
      startTime: "",
    };
  },
  methods: {
    //打开班别方案选择列表
    openDialog() {
      let data = this.$refs.editForm.getCurrentData();
      this.title = "选择班别方案";
      this.searchData = {
        deptId: data.deptId,
        deptName: data.deptName,
      };
      this.show = true;
    },
    //选择辨别方案
    doSubmit() {
      let data = this.$refs.classRelatePage.getselectData();
      this.$refs.editForm.setFormItem("classesName", data.name);
      this.$refs.editForm.setFormItem("classesId", data.id);
      this.$refs.editForm.setFormItem("staffType", data.staffType);
      // this.$refs.editForm.setFormItem("advanceShiftTime", data.advanceShiftTime);
      // this.$refs.editForm.setFormItem("advanceShiftUnit", data.advanceShiftUnit);
      if (data.staffType == "3") {
        this.$refs.editForm.setItemArrRules({
          locationName: {
            required: false,
          },
        });
      } else {
        this.$refs.editForm.setItemArrRules({
          locationName: {
            required: true,
            message: "请选择值班地点",
            trigger: "blur",
          },
        });
      }
      this.startTime = data.startTime;
      this.$emit("getExecuteInfo", data);
      this.show = false;
    },
    doClose() {
      this.show = false;
    },
    async getFormData() {
      let formData = await this.$refs.editForm.getFormData();
      if (formData.locationName == undefined || formData.locationName == "") {
        formData.locationId = "-";
      }
      formData.shiftList = [];
      return formData;
    },
  },
};
</script>

<style lang="less" scoped>
</style>